<!-- Modal form for creating board -->
<div class="modal fade" id="user-board-form" tabindex="-1" role="dialog" aria-labelledby="user-board-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="user-board-label">{{ board.tid ? 'Update board' : 'Create board' }}</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger user-board-errors" role="alert"></div>
        <form role="form" class="form-horizontal" novalidate name="userBoardForm" >
          <div class="form-group" show-errors>
            <label for="iBoardName" class="col-sm-2 control-label">Name:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="iBoardName"
                     placeholder="Board name" ng-model="board.name" required
                     ng-maxlength="50" name="name" />

              <p class="help-block" ng-if="userBoardForm.name.$error.required">The user's name is required</p>
            </div>
          </div>

          <div class="form-group">
            <label for="iBoardCategory" class="col-sm-2 control-label">Category:</label>
            <div class="col-sm-10">
              <select class="form-control" id="iBoardCategory" placeholder="Board category" ng-model="board.field_category.und[0].value">
                <?php print $category_options; ?>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="iBoardCover" class="col-sm-2 control-label">Cover:</label>
            <div class="col-sm-10">
              <input type="file" class="form-control form-file" id="iBoardCover" ng-show="!uploader.isUploading"
                     placeholder="Board cover" nv-file-select uploader="uploader" accept="image/*" />
              <div class="progress" ng-show="uploader.isUploading">
                <div class="progress-bar progress-bar-success"
                     role="progressbar" aria-valuenow="60" aria-valuemin="0"
                     aria-valuemax="100" style="width: 0%;" ng-style="{'width': uploader.progress + '%'}">
                  <span class="sr-only">60% Complete</span>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="iBoardCategory" class="col-sm-2 control-label">Privacy:</label>
            <div class="col-sm-10">
              <label class="radio-inline">
                <input type="radio" name="privacyOptions" id="iPrivacy" value="public" checked  ng-model="board.field_privacy.und[0].value"> Public
              </label>
              <label class="radio-inline">
                <input type="radio" name="privacyOptions" id="iPrivacy" value="private" ng-model="board.field_privacy.und[0].value"> Private
              </label>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default pull-left" data-dismiss="modal">Cancel and go back</button>
        <button type="submit" class="btn btn-primary pull-right" ng-click="createBoard()">{{ board.tid ? 'Update board' : 'Create board' }}</button>
      </div>
    </div>
  </div>
</div>
